<template>
  <div>
    <div style="width: 750px; height: 500px; margin: 20px; border: dashed #cacaca 1px; text-align: center;">
      <img :src="cropperImg" style="max-width: 100%" ref="img">
    </div>
  </div>
</template>

<script>
import Cropper from 'cropperjs'

export default {
  name: 'ImgCropper',
  props: {
    cropperImg: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      cropper: ''
    }
  },
  mounted () {
    this.initCropper()
  },
  methods: {
    initCropper () {
      let cropper = new Cropper(this.$refs.img, {
        viewMode: 1,
        aspectRatio: 16 / 9
      })
      this.cropper = cropper
    }
  }
}
</script>
